<template>
  <el-empty v-if="!replies" description="暂无解答"></el-empty>
  <div class="ques-list">
    <el-row class="ques-head">
      <el-col :span="2">ID</el-col>
      <el-col :span="10">内容</el-col>
      <el-col :span="4">提交者</el-col>
      <el-col :span="4">提交时间</el-col>
      <el-col :span="4">操作</el-col>
    </el-row>
    <div v-if="!replies || replies.length === 0 ">
      <el-empty description="题目列表为空"></el-empty>
    </div>
    <div v-else v-for="r in replies" :key="r.id">
      <div class="ques-row">
        <el-row style="display: flex;align-items: center">
          <el-col :span="2">{{r.id}}</el-col>
          <el-col :span="10" >{{r.content}}</el-col>
          <el-col :span="4">{{r.nickname}}</el-col>
          <el-col :span="4">{{new Date(r.time * 1000).toLocaleString()}}</el-col>
          <el-col :span="4">
            <el-tooltip placement="bottom" content="删除">
              <el-icon class="m-manage-icon cpt" @click="delReply(r.id)"><delete /></el-icon>
            </el-tooltip>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import {Ask} from "../../../utils/http/ask";
import {Delete} from "@element-plus/icons";
import {ElMessageBox} from "element-plus";
export default {
  name: "ReplyManage",
  components:{
    Delete
  },
  props:[
    "askId"
  ],
  data:function () {
    return{
      aid : 0,
      replies : []
    }
  },
  methods:{
    async getReplies(){
      let resp = await Ask.getRepliesByAsk(this.aid)
      if (resp.success){
        let rs = resp.data.replies
        rs.forEach(r=>{
          r.content = r.content.slice(0,20)+'...'
        })
        this.replies = rs
      }
    },
    async delReply(id){
      ElMessageBox.confirm(
        '确定要删除该回答吗',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(async () => {
          let resp = await Ask.removeReply(id)
          if (resp.success){
            this.$success("删除成功")
            this.getReplies()
          }else {
            this.$error("删除失败 ： "+resp.message)
          }
        })
        .catch(()=>{})
    }
  },
  mounted() {
    this.aid = this.$props.askId
    this.getReplies()
  }
}
</script>

<style scoped>
.ques-head{
  color: black;
  font-size: 16px;
  height: 45px;
  line-height: 45px;
  border-top: 1px solid #f1f1f1;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12);
}

.ques-row{
  padding: 10px 0;
}
.ques-row:hover{
  background: #eee;
}

.m-manage-icon {
  font-size: 20px;
  color: #53a8ff;
}

.cpt {
  cursor: pointer;
}
</style>
